<%--
  Created by IntelliJ IDEA.
  User: zrw
  Date: 2020/2/26
  Time: 9:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../echarts/dist/echarts.min.js"></script>
    <script src="../echarts/theme/macarons.js"></script>
    <style type="text/css">
        * {
            color: #909399;
            font-size: 14px;
        }
        h1 {
            font-size: 22px;
            text-align: center;
        }
        .date {
            margin-left: 40px;
        }
        /* 去除el-table底部的滚动条 */
        .el-table__body-wrapper::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }
        .el-input__inner {
            color: #86868b;
            font-weight: 600;
        }
        #table-div {
            float: right;
        }
        #chart {
            width: 800px;
            height: 400px;
            float: left;
            margin-top: 20px;
        }
        .el-table th .cell {
            font-weight: normal;
        }
    </style>
</head>
<body>
    <h1>${name}成交量</h1>
    <div id="app">
        <template>
            <div class="block date">
                <span class="demonstration">选择查询日期：</span>
                <el-date-picker
                        v-model="value1"
                        type="date"
                        value-format="yyyy-MM-dd"
                        @change="getSelectTime"
                        placeholder="选择日期">

                </el-date-picker>
            </div>
            <div class="block" id="table-div">
                <el-table :data="tableData" border style="width: 400px;">
                    <el-table-column prop="customerId" label="号码" width="120">
                        <template slot-scope="scope">
                            <div v-html="scope.row.customerId" style="color: #909399;"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createDate" label="时间" width="100">
                        <template slot-scope="scope">
                            <div v-html="scope.row.createDate" style="color: #909399;"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="taskName" label="项目" width="180">
                        <template slot-scope="scope">
                            <div v-html="scope.row.taskName" style="color: #909399;"></div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        background="true"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="5"
                        layout="total, prev, pager, next"
                        :total="counts"
                        style="margin-top: 10px;">

                </el-pagination>
            </div>
        </template>
    </div>
    <div id="chart"></div>
    <script>
        var datas = ${chartData};
        var mons = [];
        var sucs = [];
        for (i in datas) {
            mons[i] = datas[i].mon;
            sucs[i] = datas[i].success;
        }
        var chart = echarts.init(document.getElementById('chart'), 'macarons');
        var option = {
            color: ['#67C23A'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['成交量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: mons,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '成交量',
                    type: 'bar',
                    barWidth: 20,
                    data: sucs
                }
            ]
        };
        chart.setOption(option);
        var Main = {
            data() {
                return {
                    value1: '${today}',
                    tableData: ${data},
                    currentPage: 1,
                    counts: ${total}
                }
            },
            methods: {
                getSelectTime(val) {
                    var cId = '${cId}';
                    var _this = this;
                    $.ajax({
                        type: "post",
                        url: "getPageInfo",
                        data: "cId=" + cId + "&date=" + val,
                        success: function(data) {
                            _this.tableData = data;
                            _this.counts = data[0].total;
                            $.ajax({
                                type: 'post',
                                url: 'getChartData',
                                data: 'cId=' + cId + '&date=' + val,
                                success: function (message) {
                                    datas = message;
                                    mons = [];
                                    sucs = [];
                                    for (i in datas) {
                                        mons[i] = datas[i].mon;
                                        sucs[i] = datas[i].success;
                                    }
                                    chart = echarts.init(document.getElementById('chart'), 'macarons');
                                    option = {
                                        color: ['#67C23A'],
                                        tooltip: {
                                            trigger: 'axis',
                                            axisPointer: {
                                                type: 'shadow'
                                            }
                                        },
                                        legend: {
                                            data: ['成交量']
                                        },
                                        grid: {
                                            left: '3%',
                                            right: '4%',
                                            bottom: '3%',
                                            containLabel: true
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: mons,
                                                axisTick: {
                                                    alignWithLabel: true
                                                }
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value'
                                            }
                                        ],
                                        series: [
                                            {
                                                name: '成交量',
                                                type: 'bar',
                                                barWidth: 20,
                                                data: sucs
                                            }
                                        ]
                                    };
                                    chart.setOption(option);
                                }
                            });
                        }
                    });
                },
                handleCurrentChange(val) {
                    var cId = '${cId}';
                    var date = this.value1;
                    var _this = this;
                    $.ajax({
                        type: 'post',
                        url: '/getPageInfo',
                        data: "start=" + val + "&cId=" + cId + "&date=" + date,
                        success: function(data) {
                            _this.tableData = data;
                        }
                    });
                }

            }
        }
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');
    </script>
</body>
</html>
